export default class EditorTooltip {
  mouseenterCallback = (...args) => this.mouseenter(...args);
  doBindCallback = () => this.doBind();
  messageBox = undefined;
  supportInstance = undefined;

  constructor(supportInstance) {
    this.supportInstance = supportInstance;
  }

  bind() {
    this.supportInstance.graph.on('afterrender', this.doBindCallback); // 绘制后绑定点击事件
    this.supportInstance.graph.on('mouseup', this.doBindCallback); // 鼠标抬起时绑定点击事件
    this.supportInstance.graph.on('wheel', this.doBindCallback); // 滚轮事件时绑定点击事件
    return this;
  }

  doBind() {
    if (this.timer1) {
      clearTimeout(this.timer1);
    }
    this.timer1 = setTimeout(() => {
      // console.log('doBind');
      this.bindTargets = document.body.querySelectorAll('.h-flow-formula-icon') || [];
      this.bindTargets.forEach(e => {
        e.removeEventListener('mouseenter', this.mouseenterCallback);
        e.addEventListener('mouseenter', this.mouseenterCallback);
      });
    }, 200);
  }

  unbind() {
    // console.log('unbind');
    (this.bindTargets || []).forEach(e => {
      e.removeEventListener('mouseenter', this.mouseenterCallback);
    });
    return this;
  }

  mouseenter(e) {
    // console.log('mouseenter')
    // console.log(e);
    let timer2 = null
    const hideCallback = () => {
      document.body.removeEventListener('mousemove', moveFunction);
    }
    this.mousemove(e, hideCallback);
    const moveFunction = (e1) => {
      if(timer2) clearTimeout(timer2)
      setTimeout(() => {
        this.mousemove(e1, hideCallback)
        timer2 = undefined;
      }, 1);
    }
    document.body.removeEventListener('mousemove', moveFunction);
    document.body.addEventListener('mousemove', moveFunction);
  }

  mousemove(e, hideCallback) {
    // console.log('mousemove')
    let {target, clientX, clientY} = e;
    // if (this.timer) {
    //   clearTimeout(this.timer);
    //   this.timer = undefined;
    // }
    // this.timer = setTimeout(() => {
      if (this.isInTooltip(target)) {
        return;
      }
      if (this.isFormulaIcon(target)) {
        this.showMessageBox(target, clientX, clientY);
      } else {
        this.hideBox();
        hideCallback && hideCallback()
      }
    // }, 1);
  }

  isInTooltip(target) {
    while (target && target !== document.body && !target.classList.contains('h-flow-editor-tooltip')) {
      target = target.parentNode;
    }
    return target && target !== document.body && target.classList.contains('h-flow-editor-tooltip');
  }

  isFormulaIcon(target) {
    return target.classList.contains('h-flow-formula-icon');
  }

  hideBox() {
    if (this.messageBox) {
      this.messageBox.remove();
    }
    this.messageBox = undefined;
  }

  showMessageBox(target, clientX, clientY) {
    if (!this.messageBox) {
      this.createMessageBox();
    }
    this.messageBox.innerHTML = '';
    this.messageBox.style.left = (clientX - 80) + 'px';
    this.messageBox.style.top = (clientY + 30) + 'px';
    this.createContent(target).filter(e => !!e).forEach(e => this.messageBox.append(e));
  }

  createContent(el) {
    let id = this.supportInstance.getNodeId(el);
    let {edges} = this.supportInstance.getModel();
    let edge = (edges || []).find(e => e.id === id);
    if (!edge) {
      throw new Error("没有找到边：" + id);
    }
    return [
      this.createTitle('分支条件:'),
      this.createMessage(edge.formulaText || ''),
      this.createTitle('分支优先级:'),
      this.createMessage(edge.priority + ' (数字越大越优先执行)'),
      edge.remark && this.createTitle('备注:'),
      edge.remark && this.createMessage(edge.remark),
    ];
  }

  createMessage(text) {
    let div = document.createElement('div');
    div.innerHTML = text;
    div.className = 'h-flow-editor-tooltip-message';
    return div;
  }

  createTitle(text) {
    let div = document.createElement('div');
    div.innerHTML = text;
    div.className = 'h-flow-editor-tooltip-title';
    return div;
  }

  createMessageBox() {
    this.messageBox = document.createElement('div');
    document.body.append(this.messageBox);
    this.messageBox.className = 'h-flow-editor-tooltip';
  }
}

